import axios from 'axios';
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
interface Iuser {
    uid: number,
    avatar: string,
    nickname: string,
    popularity: number,
    fans: number,
    cover: string
}
function PhotoGrapher() {
    let [userlist, setuserlist] = useState<Iuser[]>([
        { uid: 1, cover: "", avatar: "http://gaga-images.paixin.com/avatar/eput/0675ce1f1b1d2c08f435fdce722451d2.jpg", nickname: '曹迪CDplayer', popularity: 20, fans: 300 },
        { uid: 2, cover: "", avatar: "http://gaga-images.paixin.com/avatar/eput/5103bec20d0108ead0019f127cba11e2.jpg", nickname: 'agnes不是小清新', popularity: 240, fans: 400 },
        { uid: 3, cover: "", avatar: "http://gaga-images.paixin.com/avatar/eput/3782e260ce69c12791e75e1bdd776ab1.jpg", nickname: '蝎子大哥', popularity: 200, fans: 600 },
        { uid: 4, cover: "", avatar: "http://gaga-images.paixin.com/avatar/eput/c43cc689dcdd6e3a5e16c5eb5aaaa0c6.jpg", nickname: '曹迪CDplayer', popularity: 202, fans: 800 },
        { uid: 5, cover: "", avatar: "http://gaga-images.paixin.com/avatar/eput/129176b59ab60b7a091ebb4b3c0623ae.jpg", nickname: 'Gyeonlee', popularity: 230, fans: 900 },
        { uid: 6, cover: "", avatar: "http://gaga-images.paixin.com/photos/2020/0827/c8693c46f91925bba5b48f5a4544eb7f.jpeg", nickname: 'Island春夏', popularity: 280, fans: 3000 },

    ])

    useEffect(() => {
        axios.get('http://127.0.0.1:81/getdynamics2').then(function (res) {
            console.log(res.data);
            setuserlist(res.data.results)
        })
            .catch(function (error) {
                console.log(error);
            });

    }, [])
    return (
        <div className="ContainerTag">
            <h1>推荐摄影师</h1>
            <ul className="TagsList2">
                <li>  全部 </li>  /
                <li>  风光 </li>  /
                <li>  城市  </li> /
                <li>  人像  </li> /
                <li>  动物  </li> /
                <li>  插画 </li>
            </ul>
            <div className="TagsGrapher">
                <div>
                    <Link to={{pathname:`/home`}}> <div className="grapherLeft">
                        <img src={userlist[5].avatar} alt="" />
                        <h3>{userlist[5].nickname} </h3>
                        <p>
                            <span>{userlist[5].fans} 粉丝</span>
                            <span>{userlist[5].popularity} 人气值</span>
                        </p>
                        <div className="personI">
                            <div className="sanjiao"></div>
                            <div className="personV">
                                <div className="person"   >
                                    <div className="personInfo">
                                        <div className="item2">
                                            <img src={userlist[5].avatar} alt="" />
                                            <div className="item4">
                                                <div className="username">{userlist[5].nickname}</div>
                                                <div className="num">{userlist[5].fans}名追随者</div>
                                            </div>
                                        </div>
                                        <div className="actBtn">关注</div>
                                    </div >
                                    <div className="imga">
                                        <img src={userlist[1].cover} alt="" />
                                        <img src={userlist[2].cover} alt="" />
                                        <img src={userlist[3].cover} alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> </Link>
                </div>
                <div className="grapherRight">
                    {
                        userlist.map((item, index) => {
                            return (
                                <Link to={{pathname:"/home"}} key={index}> 
                                 <div className="item" >
                                    <img src={item.avatar} alt="" />
                                    <div>
                                        <h3>{item.nickname}</h3>
                                        <p>
                                            <span>{item.fans}粉丝</span>
                                            <span>{item.popularity}人气值</span>
                                        </p>

                                    </div>
                                    <div className="personI">
                                        <div className="sanjiao"></div>
                                        <div className="personV" >
                                            <div className="person"   >
                                                <div className="personInfo">
                                                    <div className="item2">
                                                        <img src={item.avatar} alt="" />
                                                        <div className="item4">
                                                            <div className="username">{item.nickname}</div>
                                                            <div className="num">{item.fans}名追随者</div>
                                                        </div>
                                                    </div>
                                                    <div className="actBtn">关注</div>
                                                </div >
                                                <div className="imga">
                                                    <img src={item.cover} alt="" />
                                                    <img src={userlist[2].cover} alt="" />
                                                    <img src={userlist[4].cover} alt="" />
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div> </Link>

                            )
                        })
                    }
                </div>
            </div>
            <div className="activeBtn">更多摄影师</div>
        </div>
    );
}
export default PhotoGrapher;